<template>
<div>
	<a-modal
      title="消息详情"
      :visible="visible"
      @cancel="closeMess"
      width="720px"
      :footer="null" class='detial-form-model'>
        <div class="mess-Detail">
            <ul>
               <li>标题：{{detailData.messageTitle}}</li>
               <li>内容：<span>{{detailData.messageContent}}</span></li>
               <li v-if="detailData.sendUserNickName">
                  <div class="send-people">发送人：{{detailData.sendUserNickName}}</div>
               </li>
                <li v-if="detailData.receiveUserNickName">
                  <div class="send-people">接收人：{{detailData.receiveUserNickName}}</div>
               </li>
            </ul>
            <a-row class="ant-lable-button">
              <!--<a-button  class='ant-btn-green' @click="replyShowModal">立即回复</a-button>-->
              <a-button  class='ant-btn-grey' @click='closeMess'>关闭</a-button>
            </a-row>
        </div>  
    </a-modal>
    <!-- 回复留言模态框 -->
    <a-modal
        title="回复消息"
        :visible="cancelVisible"
        @cancel="surecancel"
        width="730px"
        class='replay-model'  :footer="null">
        <a-form :form="form" @submit="handleSubmit">
                    <a-row class='send-565px;'>
                         <a-col :span='24'>
                            <a-form-item label="标题：" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
                              <a-input v-decorator="['replayTitle',{rules: [{ required: true, message: '标题不能为空!' }]}]" placeholder='请填写留言的标题'/>
                           </a-form-item>
                         </a-col>
                    </a-row>
                    <a-row class='send-565px;'>
                         <a-col>
                            <a-form-item label="内容：" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
                              <a-textarea v-decorator="['replayContent',{rules: [{ required: true, message: '回复内容不能为空!' }]}]" placeholder='请填写您想说的话......' style='height:100px;'/>
                           </a-form-item>
                         </a-col>
                    </a-row>
                     <a-row>
                        <a-col :span='12'>
                           <div><i class="mess-tips">*</i>发送人：{{detailData.userName}}</div>
                        </a-col>
                         <a-col :span='12'>
                           <div><i class="mess-tips">*</i>联系方式：{{detailData.userMobile}}</div>
                        </a-col>
                     </a-row>
                     <a-row>
                       <a-col class='send-choseway'>
                            <a-form-item  label="发送方式：" >
                                  <a-checkbox-group v-decorator="['replayType']">
                                    <a-checkbox value="1">
                                      站内信
                                    </a-checkbox>
                                  </a-checkbox-group>
                              </a-form-item>
                       </a-col>
                     </a-row>  
                    <a-row class="ant-lable-button">
                      <a-button  class='ant-btn-green' html-type="submit">立即发送</a-button>
                      <a-button  class='ant-btn-grey' @click='surecancel'>取消</a-button>
                    </a-row>
         </a-form>
    </a-modal>
</div>
</template>
<script>
	export default {
	 data() {
      return {
        visible: false,
        cancelVisible: false,
        detailData: {},
        form: this.$form.createForm(this),
       // confirmLoading: false
      }
    },
    methods: {
      // 展示信息模态框
      showModal(d,type) {
      	this.detailData = d;
      	this.visible = true;
      	if(type == 1){
      		this.editmessageRead(d.messageUserId)
      	}
      },
      editmessageRead (id){
      	var idslist = []
      	idslist.push(id)
//    	.join(',')
      	let values = {ids:idslist}
      	this.$put('/message/internalMessage/received/markAsReaded', values).then((r) => {
			console.log(r,8989)
//			if(r.status == 200){
//				this.$message.success('编辑成功!')
//			}
			this.loading = false;
		}).catch((e) => {
			this.loading = false;
		})
      },
      // 取消回复
      closeMess(){
          this.visible=false;
		  this.$emit('close');
      },
      // 立即回复
      replyShowModal(){
//        this.handleCancel();
         this.cancelVisible = true;
      },
      // 取消回复
      surecancel(){
        this.cancelVisible = false;
		this.$emit('close');
      },
      // 发送回复
		handleSubmit(e) {
			if(this.loading) return;
			e.preventDefault();
			this.form.validateFieldsAndScroll((err, values) => {
				if(!err) {
					this.loading = true;
					if (values.replayType) values.replayType = values.replayType.join()
					this.$post('/info/messageReply', values, true).then((r) => {
						this.$message.success(r.data.message);
						this.surecancel();
//						if(r.data.code == '0000') {
//							this.$message.success('发送成功！');
//							this.handleCancel();
//						} else {
//							this.$message.error(r.data.message);
//						}
						this.loading = false;
					}).catch((e) => {
						this.loading = false;
					})
				}
			});
		},
    }
}
</script>
<style lang="less">
  .ant-modal-close{
          right: 32px !important;
          top: -5px !important;
          span{
              width: 11px;
              height: 11px;
             color: #15837A;
             font-size: 16px;
          }
  }
  //查看信息详情
  .detial-form-model{
      .ant-btn{
        width:120px !important;
        height:40px !important;
        font-size:16px;
        margin-top:25px;
     }
      .ant-modal-body{
       padding-top:0 !important;
    }
      .mess-Detail{
         width:613px;
         margin:0 auto;
         ul{
            margin:0;
            padding:0;
            li{
              list-style:none;
              font-size:14px;
              color:#333333;
              padding:20px 0;
              border-bottom:1px solid #E8E8E8;
              span{
                  float:right;
                  width:570px;
                  display:inline-block;
              }
              div{
                  float:left;
                  width:298px;
                  line-height:4px;
              }
              div:nth-child(2){
                  float:right;
              }
            }
            li:nth-child(2){
                height:82px;
            }
         }
      }
  }
  //回复信息
  .replay-model{
     .ant-btn{
        width:120px !important;
        height:40px !important;
        font-size:16px;
     }
    .ant-modal-content{
       .ant-modal-header{
          padding:12px 0 12px 30px;
          background:#E9F4F3;
        .ant-modal-title{
           font-weight:500;
           font-size:16px;
           color:#15837A;
        }
        .ant-modal-close{
              right: 32px !important;
              top: -5px !important;
              .ant-modal-close-x{
                width: 11px;
                height: 11px;
                color: #15837A;
                font-size: 16px;
                display:inline-block;
              }
        }
      }
    }
    div{
        font-size:14px;
        color:#333333;
        .mess-tips{
            font-style:normal;
            color:#FF5569;
            font-size: 20px;
            vertical-align: middle;
        }
    }
    .send-choseway{
       .ant-form-item-label{
          float:left;
       }
    }
  } 
</style>